<template>
	<view>
		<bjx-form label-type="inline" ref="form" :form="form" :rules="rules" msg-type="in">
			<uni-list class="traveler-add">
				<uni-card title="旅客姓名"
				:is-shadow="true"
				:note="travelNote">
					<input-item  prop="name" label="中文姓名">
						<input v-model="form.name" placeholder="与证件姓名一致" type="text">
					</input-item>
				</uni-card>
				<uni-card title="证件信息" :is-shadow="true">
					<input-item :showArrow="true" prop="certificatesType" label="证件类型" @click="cardClick">
						<text>{{typeArr[form.certificateType]}}</text>
					</input-item>
					<input-item prop="certificateNum" label="证件号码">
						<input v-model="form.certificateNum" placeholder="所持证件号码" type="text">
					</input-item>
				</uni-card>
			</uni-list>
			<button type="default" @click="saveForm">保存</button>
		</bjx-form>
		<uni-popup ref="showpopup" type="bottom">
			<view class="popup-content uni-flex" v-for="item,index in typeArr" :key="index" @click="popupClick(index)">
				{{item}}
				<uni-icons v-if="spopIndex == index" :size="20" class="uni-icon-wrapper" color="#00ff00" type="checkmarkempty"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import bjxForm from '@/components/bjx-form/bjx-form.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import inputItem from './components/input-item.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default{
		components: {
			uniCard,
			bjxForm,
			uniPopup,
			uniList,
			inputItem,
			uniIcons
		},
		data() {
			return {
				travelNote:'为顺利出行，请确保出行姓名与证件上一致',
				typeArr:['身份证','护照','港澳通行证','台湾通行证','回乡证','台胞证','军官证','士兵证'],
				spopIndex:0,
				eventChannel:null,
				fromPage:'',//保存从哪个页面跳转到此页
				rules: {
					name: {
						required: true
					},
					certificateNum: {
						required: true
					}
				},
				form: {
					id:'',
					name:'',
					certificateNum:'',
					certificateType:0
				}
			}
		},
		onLoad(e) {
			if(e.id){
				this.getTravel(e.id)
				this.form.id = e.id;
				uni.setNavigationBarTitle({
					title:"编辑出行人"
				});
			}
			const eventChannel = this.getOpenerEventChannel()
			this.eventChannel = eventChannel;
			this.eventChannel.on('fromPage', function(data) {
				this.fromPage = data.from;
			})
		},
		methods: {
			popupClick(index) {
				this.spopIndex = index;
				this.$refs['showpopup'].close();
				this.form.certificateType = index;
			},
			cardClick(){
				this.$refs['showpopup'].open()
			},
			saveForm(){
				this.$refs.form.validate(async val=>{
					if(val){
						this.form.id?this.editTravel():this.addTravel();
					}
				})
			},
			getTravel(id){
				uniCloud.callFunction({
					name:"getTraveler",
					data:{
						id
					}
				}).then(res => {
					this.form = Object.assign({},this.form,res.result.data)
				}).catch(err=>{
					uni.showModal({
						content: `获取信息失败，错误信息为：${err.message}`,
						showCancel: true
					})
				})
			},
			addTravel(){
				const pages = getCurrentPages();
				uniCloud.callFunction({
					name:"addTraveler",
					data:this.form
				}).then(res=>{
					const result = Object.assign({},this.form,res.result);
					uni.showToast({
						title: "添加成功",
						duration:2000,
						success:()=>{
							setTimeout(()=>{
								if(pages.length>1){
									uni.navigateBack({
										delta:1,
										success: () => {
											uni.$emit('newTravel',result)
										}
									})
								}else{
									uni.navigateTo({
									    url: '/pages/traveler/traveler',
										success: () => {
											uni.$emit('newTravel',result)
										}
									});
								}
							},1500)
						}
					})
				}).catch(err=>{
					uni.showModal({
						content: `添加失败，错误信息为：${err.message}`,
						showCancel: true
					})
				})
			},
			editTravel(){
				const pages = getCurrentPages();
				uniCloud.callFunction({
					name:"editTraveler",
					data:this.form
				}).then(res=>{
					const result = res.result;
					if(result.status){
						uni.showToast({
							title: "编辑成功",
							duration:2000,
							success:()=>{
								setTimeout(()=>{
									if(pages.length>1){
										uni.navigateBack({
											delta:1,
											success: () => {
												this.eventChannel.emit('editTravel', result);
											}
										})
									}else{
										uni.navigateTo({
										    url: '/'+this.fromPage?this.fromPage:'pages/traveler/traveler',
											success: () => {
												this.eventChannel.emit('editTravel', result);
											}
										});
									}
								},1500)
							}
						})
					}else{
						uni.showToast({
							title: result.msg,
							duration:3000,
							icon:'none'
						})
					}
				}).catch(err=>{
					uni.showModal({
						content: `编辑失败，错误信息为：${err.message}`,
						showCancel: true
					})
				})
			}
		}
	}
</script>

<style>
	.popup-content{
		background: #fff;
		padding: 12rpx 50rpx;
		border-bottom: 1px solid #999;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.traveler-add .uni-list-item,.bjx-form-item{
		padding: 0 !important;
	}
</style>
